<template>
	<view class="route-car">
		<view class="have">
			<view class="cont">
				<view class="action" v-if="carList.length">

					<view class="" @click="handelChangeEdit">
						{{isEdit?'取消管理':'管理'}}
					</view>
				</view>
				<view class="inner" v-if="carList.length">
					<block v-for="(item,index) in carList" :key="index">
						<view class="good-item">
							<view class="good-info">
								<view class="check">
									<u-checkbox-group @change="handleChangeSelect(item,$event)">
										<u-checkbox :checked="item.checked" :name="item.id" activeColor="#ED2920"
											shape="circle" label=""></u-checkbox>
									</u-checkbox-group>

								</view>
								<view class="info-left">
									<image class="img" :src="item.goodimage" mode=""></image>
								</view>
								<view class="info-right">
									<view class="name">
										{{item.goodname}}
									</view>
									<view class="desc">
										{{item.guige}}
									</view>

									<view class="priceandnum">
										<view class="price">
											<view class="">
												￥
											</view>
											<view class="val">
												{{item.price}}
											</view>
										</view>
										<view class="num" v-if="!isEdit">
											<u-number-box button-size="26" :min="1" v-model="item.num"
												@change="handleChangeNum(item,$event)"></u-number-box>
										</view>
									</view>
								</view>
							</view>

						</view>
					</block>
				</view>
				<view class="none" v-else>
					<u-empty mode="car"></u-empty>
				</view>
			</view>
			<view class="footer">
				<view class="footer-left">
					<u-checkbox-group @change="handleChangeAll">
						<u-checkbox :checked="isSelectAll" name="all" activeColor="#ED2920" shape="circle"
							label="全选"></u-checkbox>
					</u-checkbox-group>
				</view>
				<view class="footer-right">
					<view class="total" v-if="!isEdit">
						<view class="label">
							合计:
						</view>
						<view class="price">
							<view class="tips">
								￥
							</view>
							<view class="val">
								{{formatNumber(totalPrice)}}
							</view>
						</view>
					</view>
					<view class="btn" v-if="!isEdit" @click="handleGoPlayOrder">
						去结算
					</view>
					<view class="btn" v-if="isEdit" @click="handleDel">
						删除
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script setup>
	import formatNumber from '@/utils/formatNumber.js'
	import _ from 'lodash'
	import {
		ref,
		computed
	} from 'vue'
	import {
		onReady,
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	import handleCache from "@/utils/cache.js"
	import {
		carApi
	} from '@/api/index.js'
	const userInfo = ref('')
	const carList = ref([])
	const isEdit = ref(false)
	onShow(() => {
		userInfo.value = handleCache.get('userInfo')
		getCarList()
	})
	let isSelectAll = computed(() => {
		if (carList.value.length) {
			var checkAdult = carList.value.every(item => item.checked)
			return checkAdult
		} else {
			return false
		}
	})
	let totalPrice = computed(() => {
		let price = 0
		if (carList.value.length) {
			carList.value.forEach((item) => {
				if (item.checked) {
					let num = _.multiply(item.price, item.num)
					price = _.add(price, num)
				}

			})
		}

		return price
	})
	const getCarList = async () => {
		let {
			data
		} = await carApi.goodcartlist({
			uid: userInfo.value.id,
			shanghuid: userInfo.value.shanghuid
		}, {
			loading: {
				text: '加载中'
			}
		})
		if (data?.length) {
			carList.value = data.map(item => ({
				...item,
				checked: true
			}))
		} else {
			isEdit.value = false
			carList.value = []
		}

	}
	const handleChangeNum = (data, event) => {

		let req = {
			id: data.id,
			num: event.value
		}
		uni.showLoading({
			title: ''
		})
		carApi.cartupdate(req).then((res) => {
			uni.hideLoading()
			if (res.code == 0) {
				getCarList()
			} else {
				uni.showToast({
					title: res.msg,
					icon: 'none',
					mask: true
				})
			}
		})
	}
	const handleChangeSelect = (data, event) => {

		carList.value = carList.value.map((item) => {
			console.log(item.id, data.id)
			if (item.id === data.id) {
				item.checked = event?.length ? true : false
			}
			return item
		})

	}
	const handleChangeAll = (val) => {
		console.log(val)
		if (val?.length) {
			carList.value = carList.value.map((item) => ({
				...item,
				checked: true
			}))
		} else {
			carList.value = carList.value.map((item) => ({
				...item,
				checked: false
			}))
		}
	}

	const handelChangeEdit = () => {
		isEdit.value = !isEdit.value
		if (carList.value) {
			carList.value = carList.value.map(item => ({
				...item,
				checked: false
			}))
		}
	}

	const handleDel = async () => {
		let haveCheck = carList.value.some(item => item.checked)
		if (!haveCheck) {
			uni.showToast({
				mask: true,
				icon: 'none',
				title: '请选择删除的商品'
			})
			return
		}
		uni.showModal({
			title: '提示', // 标题
			content: '确定删除选中的商品吗?', // 提示内容
			labelColor: '#3385e3', // 确认按钮文字颜色
			cancelText: "取消", // 取消按钮的文字
			confirmText: "确认", // 确认按钮的文字
			showCancel: true, // 是否显示取消按钮，默认为 true
			confirmColor: '#ED2920',

			success(res) {
				if (res.confirm) {
					let ids = carList.value.filter(item => item.checked).map(item => item.id)
					if (ids.length) {
						ids.forEach(async (item) => {
							await carApi.cartdel({
								id: item
							})
						})
						getCarList()
					}

				} else {
					//点击取消之后执行的代码
				}
			}
		});

	}
	const handleGoPlayOrder = () => {
		let haveCheck = carList.value.some(item => item.checked)
		if (!haveCheck) {
			uni.showToast({
				mask: true,
				icon: 'none',
				title: '请选择商品'
			})
			return
		}
		let arr = carList.value.filter(item => item.checked)
		let ids = arr.map(item => item.id)
		uni.navigateTo({
			url: '/pages/playorder/playorder?carId=' + ids.join(',')
		})
	}
</script>

<style lang="scss" scoped>
	@import 'index.scss'
</style>